<template>
  <div class="wrap wrapContent">
    <!-- 輪播圖 -->
    <div class="banner" style="display: none;" v-if="bannerArrshou.length != 0">
      <el-carousel trigger="click" >
        <el-carousel-item v-for="(item,index) in bannerArrshou" :key="index">
          <img :src="item.backUrl" alt="" @click='gotoimgLink(item.pictureUrl,item)'>
        </el-carousel-item>
      </el-carousel>
    </div>    
    <!-- 內容 -->
    <div class="content">
      <!-- 每壹個item 分別包含 商品列表 視頻 輪播圖 -->
      <div class="content_item" v-for="(item,index) in arr" :key='index'> 
        <!-- 視頻 -->
        <div class="video" style="display: none;" v-if="vedio && ($route.query.classifyid == 0 || indexVedio) && index == 2">
          <div class="vedioimg" v-if="!isVedio">
            <img class="boimg" src="@/assets/bo.png" alt="" @click="openVedio(index)">
            <img class="realimg" :src="vedioImg" alt="">
          </div>          
          <video v-if="isVedio" :src="vedio" controls='controls' id='videoPlayer'></video>
        </div>

        <!-- 輪播圖 -->
        <div class="itemScroll" v-if="item.lunboimg">
          <el-carousel trigger="click" >
            <el-carousel-item v-for="(itemsss,indexsss) in item.lunboimg" :key="indexsss">
              <img :src="itemsss.backUrl" alt="" @click='gotoimgLink(itemsss.pictureUrl,itemsss)'>
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 商品列表 -->
        <div class="good" v-if='item.isnew != 1'>
          <div>{{item.title}}</div>
          <!-- 商品輪播 -->
          <div>
            <div class="icon_left" v-if="item.children.length >=4"><img src="@/assets/left.png" alt="" @click='gotoleft($event,index)'></div>
            <!-- 超過4個出現左右按鈕 -->
            <div :class="item.children.length >=4 ? 'collage_mostimg':'collage_smallimg'"  @mouseout="removeActiveAll()">
              <div class="collage_scroll">
                <div class="scroll_item" v-for="(items,indexs) in item.children" :key='indexs' @mouseover="changeActive(index,indexs)" @mouseout="removeActive(index,indexs)"> 
                  <!-- 商品圖片 -->
                  <img :src="items.picUrl" alt="" @click="gotodetail(items.id)">
                  <!-- 商品內容 -->
                  <div class="scroll_item_con">
                    <!-- 標題 -->
                    <div class="item_con_title">{{items.name}}</div>
                    <!-- 簡介 -->
                    <div class="item_con_text">
                      <div>
                        pv:{{items.pvValue}}
                      </div>
                      <!-- 購物數量 -->
                      <div v-show="isceng == index?(isHover == indexs?true:false):false">
                        <el-input-number :max="items.number>0?items.number:1" size="mini" :min="1" :value="items.quannum" v-on:input="handleBlur" @change="handleChange( items )"></el-input-number>
                      </div>
                    </div>
                    <!-- 價格 -->
                    <div class="item_con_price">
                      <div>${{items.counterPrice}}</div>
                      <div>{{items.retailPrice}}</div>
                    </div>
                    <!-- 加入購物車按鈕 -->
                    <div class="item_con_car" v-show="isceng == index?(isHover == indexs?true:false):false">
                      <svg t="1607987342685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1254" width="37" height="30"><path d="M900.48 843.52H268.8L106.88 88.96H32a32 32 0 0 1-32-32A31.36 31.36 0 0 1 32 25.6h128L320 780.16h580.48a32 32 0 0 1 0 64z" p-id="1255" fill="#ffffff"></path><path d="M904.32 698.88H272v-64h606.72L953.6 275.2H195.84v-64H992a32.64 32.64 0 0 1 24.96 12.16 31.36 31.36 0 0 1 6.4 26.24l-87.68 423.04a32 32 0 0 1-31.36 26.24z" p-id="1256" fill="#ffffff"></path><path d="M232.96 372.48h702.08v63.36H232.96z" p-id="1257" fill="#ffffff"></path><path d="M562.56 421.12h63.36v219.52h-63.36zM742.336 634.944l42.752-219.2 62.208 12.16-42.752 219.2zM340.736 427.136l62.208-12.096 42.56 219.328-62.208 12.032zM888.96 998.4a109.44 109.44 0 1 1 109.44-108.8 109.44 109.44 0 0 1-109.44 108.8z m0-154.88a46.08 46.08 0 1 0 46.08 46.08 46.08 46.08 0 0 0-46.08-46.08zM310.4 998.4a109.44 109.44 0 1 1 109.44-108.8 109.44 109.44 0 0 1-109.44 108.8z m0-154.88a46.08 46.08 0 1 0 46.08 46.08 46.08 46.08 0 0 0-46.08-46.08z" p-id="1258" fill="#ffffff"></path></svg>
                      <div @click="addToCart(items)">加入購物車</div>
                    </div>
                  </div>
                </div>                
              </div>
            </div>    
            <div class="icon_left" v-if="item.children.length >=4"><img src="@/assets/right.png" alt="" @click='gotoright($event,index)'></div> 
          </div>
          <div class="checkmore">
            <div @click="gotomore(item)" v-if="item.children.length > 0">查看更多</div>
          </div>
        </div>

                
      </div>
    </div>

    <!-- 推送廣告 -->
    <!-- <div class="side" v-if="isSide">
      <img src="@/assets/cancel.png" alt="" @click="cancelSide">
      <div class="sideTitle">消息推送</div>
      <div class="sidename">{{messageData.userName}}購買了</div>
      <div class='sidenum'><span>{{messageData.goodsName}}</span><span>x{{messageData.goodsNum}}</span></div>
      <div class="sidetime">{{messageData.addTime}}</div>
    </div> -->
    
		 
    <!-- 爆炸彈框 -->
    <!-- <div class="baozha" v-if="isBao && ($route.query.classifyid == 0 || indexVedio)">
      <div class="baozha_content">
        <img class="baozan_img" src="@/assets/bao.png" alt="">
        <img class="baozan_cancel" src="@/assets/baoCancel.png" alt="" @click="baoCancel()">
        <div class="baozan_btn">
          <img src="@/assets/baoLink.png" alt="">
          <div @click="gotobaolink(baodata.link)">立即前往</div>
        </div>        
        <div class="baozan_title">幸福滋味</div>
        <div class="baozan_text">
          <img :src="baodata.url" alt="">
          <div>{{baodata.content}}</div>
        </div>        
      </div>
    </div> -->

    <!-- window.fbAsyncInit = function() {
        FB.init({
          appId      : '123', // Facebook login
          cookie     : true,
          xfbml      : true,
          version    : 'v7.0'
        });
      }; -->

  </div>
</template>
<script>

import {goodlist,getcarousel,getBanner,getVedio,getBao,hotSellRecommend,messagepush,checkUser} from '@/api/index'
import {addItemsToCart} from '@/api/car'
import bus from '@/api/bus'
import {userInfo} from '@/api/user';
import { getToken,removeToken ,setToken} from '@/utils/auth' // 驗權
export default {
  name: 'home',
  data () {
    return {
      bannerArrshou:[],
      arr:[],
      arr1:[
        {title:'人氣推薦',children:[{src:require('@/assets/good1.jpg'),name:'波士頓龍蝦1',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good.png'),name:'波士頓龍蝦2',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good2.jpg'),name:'波士頓龍蝦3',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good3.jpg'),name:'波士頓龍蝦4',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good4.jpg'),name:'波士頓龍蝦5',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1},{src:require('@/assets/good5.jpg'),name:'波士頓龍蝦5',text:'幸福方便餐',price:'686',oldprice:'999',quannum:1}],vedioImg:require('@/assets/banner4.jpg')}
      ],
      input_number_value:1,
      isceng:-1,
      isHover:-1,
      isVedio:false,
      indexVedio:false,
      // vedio:'https://haokan.baidu.com/v?vid=11427869791757640150&pd=bjh&fr=bjhauthor&type=video',
      // vedioImg:require('@/assets/banner2.jpg'),
      vedio:null,
      vedioImg:null,
      user_id:null,
      menuDong:[],//動態菜單數據
      isSide:false,//左側消息
      isBao:false,//爆炸彈窗
      baodata:{},//爆炸內容
      timer:null,
      sta:0,
      messageData:{}
    }
  },
  mounted(){
     // 獲取動態菜單
    this.getMenu()
    this.arr = []
    if(this.$route.query.sta != undefined){
         this.sta = this.$route.query.sta
    }
    if(this.sta == 0){
       checkUser(getToken()).then( res=>{
          if(res.errno == -1){
             removeToken()
          }
       })
    }
    var classid = sessionStorage.getItem('menu')
    if(classid == 0 || classid == undefined || classid == null || (classid == 'other' && this.$route.path == '/home')){
      this.indexVedio = true
      this.getdynamicDataShou()
      // this.getBannerTou(0)
      this.getVedioShou()
      this.getBaoMsg()
    }else if(classid == 1){
      this.indexVedio = false
      this.getdynamicDataNew()
      this.getBannerTou(1)
    }else{
      this.indexVedio = false
      var checkgoodid = this.$route.query.checkid
      this.getdynamicDataOther(checkgoodid)
      if(this.$route.query.bannerid){
        this.getBannerTou(this.$route.query.bannerid)
      }else{
        this.getBannerTou(checkgoodid)
      }
        
    }
    if(getToken()){
      this.user_id = getToken()
    }else{
      this.user_id = null
    }

    this.getmessage()
    bus.$on('routerWatch',(to)=>{
      this.arr = []
      if(to.query.classifyid == 0){
        // 首頁
        this.indexVedio = true
        this.getdynamicDataShou()
        // this.getBannerTou(0)
        this.getVedioShou()

        // this.indexVedio = false
        // var checkgoodid = this.$route.query.checkid
        // this.getdynamicDataOther(checkgoodid)
        // if(this.$route.query.bannerid){
        //   this.getBannerTou(this.$route.query.bannerid)
        // }else{
        //   this.getBannerTou(checkgoodid)
        // }
      }else if(to.query.classifyid == 1){
        // 最新推薦
        this.indexVedio = false
        this.getdynamicDataNew()
        // this.getBannerTou(1)

        // this.indexVedio = false
        // var checkgoodid = this.$route.query.checkid
        // this.getdynamicDataOther(checkgoodid)
        // if(this.$route.query.bannerid){
        //   this.getBannerTou(this.$route.query.bannerid)
        // }else{
        //   this.getBannerTou(checkgoodid)
        // }
      }else{
        // 其它菜單
        this.indexVedio = false
        var checkgoodid = this.$route.query.checkid
        this.getdynamicDataOther(checkgoodid)
        if(this.$route.query.bannerid){
          this.getBannerTou(this.$route.query.bannerid)
        }else{
          this.getBannerTou(checkgoodid)
        }
      }
    })
  },
  methods:{
    // 獲取動態菜單
    getMenu(){
      getcarousel().then(response => {
        if(response.errno == 0){
          this.menuDong = response.data
        }
      })
    },
    // 首頁
    getdynamicDataShou(){
      this.arr = [
        {title:'熱銷推薦',id:'1',isnew:1,children:[]},
        {title:'人氣推薦',id:'5',isnew:1,children:[]},
      ]
      getcarousel().then(response => {
        if(response.errno == 0){
          this.menuDong = response.data
          var array = []
          this.menuDong.forEach(element => {
             array.push({title:element.name,children:[],id:element.id,child:element.children})
          });
          array.forEach(element => {
            this.arr.push(element)
          })
          this.arr.forEach((element,index) => {
            // 後期在這裏更改推薦內容
            if(index > 1){
              this.menucheckPublic(element.id,index,element.child)
            }else{
              this.pushPublic(element.id,index)
            }
            if(index > 1){
              this.getBannerContent(element.id,index)
            }
          })
        }
      })
    },
    // 首頁banner:0
    getBannerTou(e){
      // 临时静态banner
      if(e == 1036018){
        this.bannerArrshou = [
          {backUrl:'https://www.dianmihl.com/b123.png'}
        ]
      }else{
        // 动态banner
        getBanner({id:e}).then(response => {
          if(response.errno == 0){
            this.bannerArrshou = response.data.list
          }
        })
      }
      
    },
    // 內部banner
    getBannerContent(e,index){
      
      if(e == 1036018){
        this.arr[index].lunboimg = [
          {backUrl:'https://www.dianmihl.com/a123.png'}
        ]
      }else if(e == 1036014){
       this.arr[index].lunboimg = [
          {backUrl:'https://www.dianmihl.com/b123.png'}
        ]
      }else if(e == 1036019){
 this.arr[index].lunboimg = [
          {backUrl:'https://www.dianmihl.com/c123.png'}
        ]
      }else{
        // 动态banner
        getBanner({id:e}).then(response => {
          if(response.errno == 0){
            this.arr[index].lunboimg = response.data.list
            // this.bannerArrshou = response.data.list
          }
        })
      }
      
    },
    // 首頁視頻
    getVedioShou(){
      getVedio().then(response => {
        this.vedio = response.data.videoUrl
        this.vedioImg = response.data.videoFace
      })
    },    
    // 最新推薦
    getdynamicDataNew(){
      this.arr = [
        {title:'熱銷推薦',id:'1',isnew:1,children:[]},
        {title:'限定優惠',id:'3',isnew:1,children:[]},
        {title:'人氣推薦',id:'5',isnew:1,children:[],},
        {title:'會員升級優惠',id:'4',isnew:1,children:[]}
      ]
      this.arr.forEach((element,index) => {
        // 後期在這裏更改推薦內容
        // if(index > 1){
          this.pushPublic(element.id,index)
        // } 
      })
    },
    // 首頁修改動態數據
    menucheckPublic(checkgoodid,index,child){
      goodlist({categoryId:checkgoodid}).then(response => {
        if(response.errno == 0){
          if(response.data.goodsList.length != 0){
            this.arr[index].children = response.data.goodsList
            for(var i = 0 ;i<this.arr[index].children.length;i++){
              this.arr[index].children[i].quannum = 1
            }
            return
          }else{
            // 當前級別的goodslist等於0時候 查找其下級的goodslist
            if(child){
              if(child.length>0){
                for(var k = 0;k<child.length;k++){
                  if(child[k].children){
                    this.menucheckPublic(child[k].id,index,child[k].children)
                  }else{
                    this.menucheckPublic(child[k].id,index)
                  }
                }
              }else{
                this.arr[index].children = []
                return
              }
            }else{
              this.arr[index].children = []
              return
            }
          }          
        }
      })
    },
    // 獲取推薦動態數據
    pushPublic(id,index){
      hotSellRecommend({catoryId:id}).then(response => {
        if(response.errno == 0){
          if(response.data.goodsList.length != 0){
            this.arr[index].children = response.data.goodsList
            for(var i = 0 ;i<this.arr[index].children.length;i++){
              this.arr[index].children[i].quannum = 1
            }
          }else{
            this.arr[index].children = []
          }        
        }
      })
    },
    // 獲取動態列表數據接口
    getdynamicDataOther(checkgoodid){
      getcarousel().then(response => {
        if(response.errno == 0){
          this.menuDong = response.data
          var array = []
          this.menuDong.forEach(element => {
            if(element.id == checkgoodid){
              array = element.children
              // array.push({title:element.children.name,children:element.children,id:element.children.id})
              return 
            }else{
              for(var j = 0;j<element.children.length;j++){
                if(element.children[j].id == checkgoodid){
                  array = element.children[j].children
                  return
                }
              }
            }
          });
          array.forEach((element,index) => {
            element.title = element.name
            if(element.children){
              element.child = element.children
            }
            element.children = []
            
          })
          this.arr = array
          this.arr.forEach((element,index) => {
            // 後期在這裏更改推薦內容
            // if(index > 1){
              this.menucheckPublic(element.id,index,element.child)
            // } 
          })
        }
      })
      // goodlist({categoryId:checkgoodid}).then(response => {
      //   if(response.errno == 0){
      //     this.arr[0].children = response.data.goodsList
      //     for(var i = 0 ;i<this.arr[0].children.length;i++){
      //       this.arr[0].children[i].quannum = 1
      //     }
      //   }
      // })
    },
    gotomore(item){
      if(item.isnew == 1){
        this.$router.push({path:'/search'})
      }else{
        this.$router.push({path:'/search'})
      }
    },
    // 多圖向左移動
    gotoleft(event,index){
      var box = document.getElementsByClassName('collage_scroll')[index]
      var boxleft = box.offsetLeft;
      if(boxleft == 0){
        box.style.left = '0px'
      }else{
        box.style.left = boxleft + 300 + 'px'
      }    
       
    },
    // 多圖向右移動
    gotoright(event,index){
      var box = document.getElementsByClassName('collage_scroll')[index]
      var boxleft = box.offsetLeft;
      var lengthNum = box.children.length
      var boxParentWidth = box.parentNode.offsetWidth;
      if(boxleft <= (boxParentWidth-((lengthNum-1)*300))){
        console.log('最後壹張了')
      }else{
        box.style.left = boxleft - 300 + 'px'
      }
    },
    // 輸入購物數量
    handleBlur(value){
      this.input_number_value = value
    },
    // 計算購物數量
    handleChange( data ) {
      let re = /^[0-9]+$/
      // if (!re.test(this.input_number_value)) {
      //   this.$message.error('請輸入大於1的正整數！')
      //   this.$nextTick(() => {
      //     data.quannum = parseInt(this.input_number_value)
      //     // data.quannum = this.input_number_value;
      //   })
      // }
      data.quannum = parseInt(this.input_number_value)
    },
    // 鼠標移入
    changeActive(index,indexs){
      this.isceng = index
      this.isHover = indexs
    },
    // 鼠標移出
    removeActive(index,indexs){
      this.isceng = index
      this.isHover = indexs
    },
    // 鼠標移出所有
    removeActiveAll(){
      this.isceng = -1
      this.isHover = -1
    },
    openVedio(index){
      this.isceng = index
      if(index == this.isceng){
        this.isVedio = true
      }
    },
    addToCart(items){
      // var userid
      // if(getToken()){
      //   userid = getToken()
      // }else{
      //   userid = 0
      // }
      if(!getToken()){
        this.$router.push('login')
        return
        this.$confirm('您當前是遊客模式，是否確認購買', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(items.isOnSale){
              if(items.quannum > items.number){
                this.$message({
                  type:'error',
                  message:'加入失敗，該商品現有庫存為'+items.number
                })
              }else{
                var array = [items.id+'#'+items.quannum]
                addItemsToCart({idAndNumber:array,userId:getToken()}).then(response => {
                  if(response.errno == 0){
                    this.$message({
                      type:'success',
                      message:'加入成功，請前往我的購物車進行查看'
                    })
                    if(!getToken()){
                      setToken(response.data.userId)
                    }
                  }else{
                    this.$message({
                      type:'error',
                      message:response.errmsg
                    })
                  }
                }) 
              }
          }else{
            this.$message({
              type:'error',
              message:'很抱歉該商品已下架'
            })
          }
        }).catch(() => {
                   
        });
      }else{
         if(items.isOnSale){
            if(items.quannum > items.number){
              this.$message({
                type:'error',
                message:'加入失敗，該商品現有庫存為'+items.number
              })
            }else{
              var array = [items.id+'#'+items.quannum]
              addItemsToCart({idAndNumber:array,userId:getToken()}).then(response => {
                if(response.errno == 0){
                  this.$message({
                    type:'success',
                    message:'加入成功，請前往我的購物車進行查看'
                  })
                  if(!getToken()){
                    setToken(response.data.userId)
                  }
                }else{
                  this.$message({
                    type:'error',
                    message:response.errmsg
                  })
                }
              }) 
            }   
        }else{
          this.$message({
            type:'error',
            message:'很抱歉該商品已下架'
          })
        }
      }
      
    },
    gotodetail(index){
      this.$router.push({path:'/detail',query:{id:index}})
    },
    cancelSide(){
      this.isSide = false
      clearInterval(this.timer)
    },
    getBaoMsg(){
      getBao().then(response => {
        if(response.errno == 0){
          if(response.data.list.length != 0){
            this.baodata = response.data.list[0]
            this.isBao = true
            // document.getElementsByClassName('wrap').style = 'overflow:hidden'
          }else{
            this.baodata = {}
            this.isBao = false
            // document.getElementsByClassName('wrap').style = 'overflow:auto'
          }
          
        }
      })
    },
    // 彈窗
    gotobaolink(link){
      if(link){
         window.open(link)
      }
      this.isBao = false
    },
    baoCancel(){
      this.isBao = false
    },
    gotoimgLink(link,item){
      if(item.brandType == 1){
        if(item.goodsid){
          this.$router.push({path:'/detail',query:{id:item.goodsid}})
        }
      }else{
        if(link){
          window.open(link)
        }
      }
    },
    getmessage(){
      var that = this
      var index = 0
      if(this.timer == null){
       this.timer = setInterval(function(){
         index+=1
          messagepush(index).then(response => {
            if(response.errno == 0){
              if(index >= response.data.total){
                index = 0
              }
              if(response.data.list.length > 0){
                that.isSide = true
                that.messageData = response.data.list[0]
              }else{
                that.isSide = false
                that.messageData = {}
                clearInterval(that.timer)
              }
            }else{
              that.isSide = false
              that.messageData = {}
              clearInterval(that.timer)
            } 
          })
        },5000)
      }  
      
    }
    // ...mapActions(['addToCart']),
  },
  destroyed(){
    clearInterval(this.timer)
  }
}



</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap{
  width: 100%;
  box-sizing: border-box;
  margin-top: -30px;
}
.banner>>>.el-carousel{
  width: 100%;
  height: 640px !important;
  overflow-x:none !important
}
.banner>>>.el-carousel__container{
  height: 640px !important;
}
.banner>>>.el-carousel__item img {
  width: 100%;
  height: 640px !important;
  object-fit: fill;
}
.banner>>>.el-carousel__item is-animating{
  width: 100%;
  height: 640px !important;
}
.banner>>>.el-carousel__button{
  width: 51px !important;
  height: 15px !important;
  border-radius: 8px;
}
.content{
  width: 100%;
  box-sizing: border-box;
}
.content_item{
  width: 100%;
  box-sizing: border-box;
  margin-top: 30px;
}
.good{
  width: 70%;
  margin: 0px auto;
  box-sizing: border-box;
  margin-top: 100px;
}
.good>div:nth-child(1){
  text-align: center;
  height: 46px;
  font-size: 46px;
  font-weight: bold;
  color: #333333;
  line-height: 46px;
}
.good>div:nth-child(2){
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  box-sizing: border-box; 
  margin: 20px 0px;
}
.icon_left img{
  width: 30px;
  height: 56px;
  cursor: pointer;
  margin-top: 170px;
}
.collage_smallimg{
  width: 100%;
  height: 400px;
  /* height: 450px; */
}
.collage_smallimg>div{
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.collage_smallimg>div>img{
  width: 285px;
  /* height: 253px; */
  height: 190px;
  margin: 0px 5px;
  object-fit: fill;
}
.collage_mostimg{
  width: 90%;
  height: 400px;
  /* height: 450px; */
  /* overflow-x: scroll; */
  position: relative;
  overflow: hidden;
}
.collage_mostimg>div{
  display: flex;
  justify-content: flex-start;
  position:absolute;
  left: 0px;
}
.scroll_item{
  width: 300px;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}
.scroll_item>img{
  width: 285px;
  /* height: 253px; */
  object-fit: fill;
  height: 190px;
}
.scroll_item_con{
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.item_con_title{
  font-size: 22px;
  font-weight: 400;
  color: #101010;
  line-height: 36px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.item_con_text{
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.item_con_text>div:nth-child(1){
  font-size: 20px;
  font-weight: 400;
  color: #BE9A67;
  line-height: 36px;
  overflow: hidden;
  height: 36px;
  text-overflow:ellipsis;
  white-space: nowrap;  
}
.item_con_text>div:nth-child(2){
  display: flex;
  align-items: center;
}
.item_con_text>>>.el-input-number,.item_con_text>>>.el-input-number--mini{
  width: 100px;
}
.item_con_text>>>.el-input-number__decrease,.item_con_text>>>.el-input-number__increase{
  background: #fff;
}
.item_con_text>>>.el-input-number__decrease:hover, .item_con_text>>>.el-input-number__increase:hover{
  color: #101010;
}
.item_con_text>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .item_con_text>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:hover{
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:active{
  border-color: #DCDFE6;
}
.item_con_price{
  display: flex;
  align-items: center;
  margin: 15px 0px;
}
.item_con_price>div:nth-child(1){
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  font-weight: 400;
  color: #FF1010;
}
.item_con_price>div:nth-child(2){
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
  color: #999999;
  margin-left: 20px;
}
.item_con_car{
  width: 100%;
  height: 50px;
  background: #BE9A67;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.item_con_car>img{
  width: 37px;
  height: 30px;
}
.item_con_car>div{
  font-size: 20px;
  font-family: 59;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.checkmore{
  width: 100%;
  box-sizing: border-box;
  margin: 50px 0px;
}
.checkmore>div{
  width: 334px;
  height: 82px;
  background: #BE9A67;
  border-radius: 41px;
  font-size: 20px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 82px;
  margin: 0px auto;
  text-align: center;
  cursor: pointer;
}
.video{
  width: 100%;
  box-sizing: border-box;
  height: 660px;
  margin-bottom: 50px;
}
.vedioimg{
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.boimg{
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 100;
  left: 50%;
  top: 50%;
  margin: -50px 0px 0px -50px;
  cursor: pointer;
}
.realimg{
  width: 100%;
  height: 660px;
  object-fit: fill;
}
.video video{
   width: 100%;
   height: 660px;
}
.itemScroll{
  width: 100%;
}
.itemScroll>>>.el-carousel{
  width: 100%;
  height: 660px !important;
  overflow-x:none !important
}
.itemScroll>>>.el-carousel__container{
  height: 660px !important;
}
.itemScroll>>>.el-carousel__item img {
  width: 100%;
  height: 660px !important;
  object-fit: fill;
}
.itemScroll>>>.el-carousel__item is-animating{
  width: 100%;
  height: 660px !important;
}
.itemScroll>>>.el-carousel__button{
  width: 51px !important;
  height: 15px !important;
  border-radius: 8px;
}
.side{
  width: 354px;
  background: #FFFFFF;
  box-shadow: 0px 8px 7px 0px rgba(127, 127, 127, 0.5);
  border-radius: 10px;
  position: fixed;
  left: 7%;
  bottom:50px;
  z-index: 10000;
  box-sizing: border-box;
  padding: 20px;
}
.side>img{
  position: absolute;
  right: 20px;
  cursor: pointer;
}
.sideTitle{
  height: 50px;
  font-size: 28px;
  font-weight: bold;
  color: #333333;
  line-height: 50px;
  text-align: center;
}
.sidename{
  font-size: 16px;
  font-weight: bold;
  color: #999999;
  line-height: 28px;
}
.sidenum{
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  line-height: 28px;
}
.sidetime{
  font-size: 16px;
  font-weight: bold;
  color: #999999;
  line-height: 28px;
  text-align: right;
}
.baozha{
  width: 100%;
  min-height: 100vh;
  background: rgba(0, 0, 0,0.8);
  display: flex;
  position: fixed;
  justify-content: center;
  z-index: 10000000000;
  top: 0px;
  left: 0px;
}
.baozha_content{
  width: 1021px;
  height: 863px;
  margin: 0px auto;
  position: relative;
}
.baozan_img{
  width: 100%;
  height: 100%;
  margin-top: -50px;
}
.baozan_cancel{
  position: absolute;
  top: 180px;
  right: 150px;
  width: 68px;
  height: 68px;
  cursor: pointer;
}
.baozan_btn{
  width: 377px;
  height: 100px;
  position: absolute;
  left: 318px;
  cursor: pointer;
}
.baozan_btn>img{
  width: 100%;
  height: 100%;
}
.baozan_btn>div{
  font-size: 37px;
  font-weight: normal;
  color: #FFEFE3;
  text-align: center;
  position: absolute;
  left: 115px;
  top: 17px;
  cursor: pointer;
}
.baozan_title{
  height: 90px;
  font-size: 96px;
  font-weight: normal;
  color: #FDF1F1;
  line-height: 50px;
  text-shadow: 0px 5px 7px rgba(199, 11, 29, 0.45);
  position: absolute;
  top: 280px;
  left: 315.67px;
}
.baozan_text{
  width: 469px;
  position: absolute;
  top: 400px;
  left: 270px;
  box-sizing: border-box;
  /* padding: 10px; */
}
.baozan_text>img{
  width: 100%;
  /* height: auto; */
  height: 280px;
  border-radius: 5px;
  /* object-fit: contain; */
}
.baozan_text>div{
  width: 100%;
  font-size: 15px;
  font-weight: normal;
  color: #FDF1F1;
  line-height: 25px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

}
</style>
